const webpack = require('webpack');
const path = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; // 包分析工具

const merge = require('webpack-merge');
const baseConfig = require('./webpack.base');

// 定义路径
const ROOT_PATH = path.resolve(__dirname); // 注意:__dirname是当前文件的路径
const SRC_PATH = path.resolve(ROOT_PATH, '../src'); 
const DIST_PATH = path.resolve(ROOT_PATH, '../dist');


let config = merge(baseConfig, {
    mode: 'none',
    entry: {
        // 入口
        app: path.join(SRC_PATH, 'app.jsx')
    },
    output: {
        publicPath: '/'
    },
    devtool: '#eval-source-map',
    devServer: {
        contentBase: SRC_PATH, // 本地服务器在哪个目录搭建页面，一般我们在当前目录即可；
        // historyApiFallback:true,//当我们搭建spa应用时非常有用，它使用的是HTML5 History Api，任意的跳转或404响应可以指向 index.html 页面；
        inline: true, //用来支持dev-server自动刷新的配置，webpack有两种模式支持自动刷新，一种是iframe模式，一种是inline模式；使用iframe模式是不需要在devServer进行配置的，只需使用特定的URL格式访问即可；不过我们一般还是常用inline模式，在devServer中对inline设置为true后，当我们启动webpack-dev-server时仍要需要配置inline才能生效
        hot: true, // 启动webpack热模块替换特性,这里是个坑
        port: 8080, //配置服务端口号
        open: true,
        host: 'localhost', //服务器的IP地址，可以使用IP也可以使用localhost
        proxy: {
            
        }
    },
    module: {
        rules: [{
                // 配置解析less
                test: /\.less$/,
                exclude: path.resolve(ROOT_PATH, 'node_modules'),
                use: [{
                    loader: "style-loader",
                }, {
                    loader: "css-loader",
                }, {
                    loader: "less-loader"
                }, {
                    loader: "postcss-loader",
                    options: {
                        // 添加浏览器前缀
                        plugins: [require("autoprefixer")("last 100 versions")]
                    }
                }]
            },
            {
                // 配置解析css
                test: /\.css$/,
                use: [{
                    loader: "style-loader",
                }, {
                    loader: "css-loader",
                }, {
                    loader: "postcss-loader",
                    options: {
                        // 添加浏览器前缀
                        plugins: [require("autoprefixer")("last 100 versions")]
                    }
                }]
            },
        ]
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin(), // 模块热更新，注意是一个坑
        // new BundleAnalyzerPlugin({ // 代码包大小分析工具
        //     // Can be `server`, `static` or `disabled`.
        //     // In `server` mode analyzer will start HTTP server to show bundle report.
        //     // In `static` mode single HTML file with bundle report will be generated.
        //     // In `disabled` mode you can use this plugin to just generate Webpack Stats JSON file by setting `generateStatsFile` to `true`.
        //     analyzerMode: 'server',
        //     // Host that will be used in `server` mode to start HTTP server.
        //     analyzerHost: '127.0.0.1',
        //     // Port that will be used in `server` mode to start HTTP server.
        //     analyzerPort: 8888,
        //     // Path to bundle report file that will be generated in `static` mode.
        //     // Relative to bundles output directory.
        //     reportFilename: 'report.html',
        //     // Automatically open report in default browser
        //     openAnalyzer: true,
        //     // If `true`, Webpack Stats JSON file will be generated in bundles output directory
        //     generateStatsFile: false,
        //     // Name of Webpack Stats JSON file that will be generated if `generateStatsFile` is `true`.
        //     // Relative to bundles output directory.
        //     statsFilename: 'stats.json',
        //     // Options for `stats.toJson()` method.
        //     // For example you can exclude sources of your modules from stats file with `source: false` option.
        //     // See more options here: https://github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
        //     statsOptions: null,
        //     // Log level. Can be 'info', 'warn', 'error' or 'silent'.
        //     logLevel: 'info'
        // }), 
    ],
});
module.exports = config;